<template>
	<view class="">
		<scroll-view scroll-x class="scroll-view" :show-scrollbar="true" @scrolltoupper="scrollLeft" @scrolltolower="scrollRight">
			<view class="scroll-view-item" v-for="(item,index) in specAttr" :key="index">
				<view class="spec-attr" :class="'iconfont ' +item.icon"></view>
				<view class="spec-attr spec-attr-title">{{item.title}}</view>
				<view class="spec-attr">{{item.value}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				specAttr: [
					{ icon: 'icon-shangshixinxi', title: '上市时间', value: '2020-12' },
					{ icon: 'icon-yanjizhushou-shangchuan_pingmuxianshi', title: '屏幕尺寸', value: '6.3-8.9' },
					{ icon: 'icon-zhonghouban', title: '机身厚度', value: '7.75-8.9' },
					{ icon: 'icon-qia', title: '双卡机类型', value: '双卡双待' },
					{ icon: 'icon-anzhuo-', title: '机身重量', value: '3KG-5.2KG' },
					{ icon: 'icon-baoxiu', title: '保修服务', value: '2年内保修' }
				],
				show:1 //0显示左边  1显示右边
			};
		},
		methods:{
			//滚动到了最左边
			scrollLeft(option){
				
			},
			//滚动到了最右边
			scrollRight(option){
				
			}
		}
	};
</script>

<style lang="less">
	.scroll-view{
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item{
		display: inline-block;
		padding: 0 20rpx;
	}
	.spec-attr{
		text-align: center;
		font-size: 25rpx;
	}
	.spec-attr-title{
		font-weight: 700rpx;
	}
</style>
